<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>添加借阅记录</title>
    <style>
        body {
            margin: 0;
            padding: 40px 20px;
            background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #e0f7fa;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
        }

        h1 {
            font-size: 2.5rem;
            color: #00f7ff;
            text-shadow: 0 0 10px #00f7ff;
            margin-bottom: 30px;
        }

        nav {
            margin-bottom: 40px;
        }

        nav a {
            color: #00e6e6;
            font-weight: bold;
            margin: 0 12px;
            text-decoration: none;
            font-size: 1.1rem;
            transition: color 0.3s;
        }

        nav a:hover {
            color: #ffffff;
            text-shadow: 0 0 8px #00f7ff;
        }

        form {
            background: rgba(10, 20, 30, 0.85);
            padding: 30px 40px;
            border-radius: 15px;
            box-shadow: 0 0 25px rgba(0, 247, 255, 0.3);
            width: 100%;
            max-width: 500px;
        }

        form p {
            margin-bottom: 20px;
            font-size: 1.1rem;
            display: flex;
            flex-direction: column;
        }

        input[type="text"],
        input[type="date"],
        select {
            margin-top: 8px;
            padding: 10px 14px;
            border: 2px solid #3cc;
            border-radius: 10px;
            background-color: #102733;
            color: #cfffff;
            font-size: 1rem;
            transition: border-color 0.3s, box-shadow 0.3s;
        }

        input[type="text"]:focus,
        input[type="date"]:focus,
        select:focus {
            border-color: #00f7ff;
            box-shadow: 0 0 8px #00f7ff;
            outline: none;
        }

        input[type="submit"] {
            background: linear-gradient(90deg, #00f7ff, #01c8ff);
            border: none;
            padding: 12px;
            width: 100%;
            color: #001f29;
            font-size: 1.2rem;
            font-weight: bold;
            border-radius: 12px;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.3s;
        }

        input[type="submit"]:hover {
            transform: scale(1.05);
            box-shadow: 0 0 15px #00f7ff;
        }

        @media (max-width: 600px) {
            form {
                padding: 20px;
            }

            h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <h1>添加借阅记录</h1>
    <nav>
        <a href="/borrows">借阅管理</a> |
        <a href="/">首页</a>
    </nav>
    <form action="/borrows/add" method="post">
        <p>图书:
            <select name="book_id">
                {{range .Books}}
                <option value="{{.ID}}">{{.Title}}</option>
                {{end}}
            </select>
        </p>
        <p>用户:
            <select name="user_id">
                {{range .Users}}
                <option value="{{.ID}}">{{.Name}}</option>
                {{end}}
            </select>
        </p>
        <p>借阅日期:
            <input type="date" name="borrow_date">
        </p>
        <p>
            <input type="submit" value="添加">
        </p>
    </form>
</body>
</html>
